<template id="traoCom_tp">
    <div>

        <div class="tarowrap">
            <div class="tops">
                <div style="margin-left: 30px; line-height: 200px;color: white;">Taro页面开发流程梳理</div>
                <img src="./assets/img/Taro.png" width="400" alt="" class="bg">
                <img src="./assets/img/Taro.png" width="130" alt="">
            </div>
            <div v-for="v in datas">
                <div class="publictitle">
                    {{v.name}}
                </div>
                <div class="publiccontrap">{{v.cont}}</div>
            </div>

        </div>

    </div>
</template>

<script>
    /*export default*/
    window.traoCom_tp = {
        template: '#traoCom_tp',
        data() {
            return {
                datas: [
                    {
                        name: 'Taro脚手架項目創建的步驟在這個地方就直接省略掉了，從頁面創建開始去進行梳理', cont: `
Taro相当于是一个容器，在这个容器里面，你使用react技术栈，vue技术栈，都可以，并且可以调用小程序的相关方法，需要注意的是小程序的wx替换成了Taro
//
以react为例，创建好jsx文件就可以在app.config.js里面配置对应的jsx文件目录路径，就可以进行相应的开发，理论上可以直接使用纯原生react语法去进行开发
//
Taro它也是只能使用指定的ui框架去进行开发，不然整个开发过程会有一定的兼容问题，有些组件的引入也必须要考虑到和小程序本身的组件使用兼容问题
//
像上面那种情况，为了避免，就只能在这个项目之外，多开个测试组件的项目，来进行一些没有使用过的组件的兼容性验证问题
                        `
                    }
                ]
            }
        }
    }
</script>


<style>
    .tarowrap .tops {
        position: relative;
        height: 200px;
        background-color: #467cc3;
        overflow: hidden;
    }

    .tarowrap .tops img {
        position: absolute;
        right: 30px;
        top: 50px
    }

    .tarowrap .tops .bg {
        opacity: .3;
        top: -50px
    }
</style>